<template>
  <div class="container">
    <!-- 页面标题 -->
    <h1 class="title">会员积分明细导入</h1>

    <!-- 操作栏 -->
    <div class="action-bar">
      <el-button type="primary" @click="handleImport">
        <el-icon icon="upload"></el-icon>
        导入Excel/CSV
      </el-button>
      
      <div class="search-box">
        <el-input
          v-model="searchPhone"
          placeholder="输入手机号搜索"
          suffix-icon="el-icon-search"
        ></el-input>
      </div>
    </div>

    <!-- 数据列表 -->
    <el-table
      v-loading="loading"
      :data="filteredData"
      @row-click="handleRowClick"
      style="width: 100%"
    >
      <el-table-column
        prop="memberId"
        label="会员ID"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="phone"
        label="手机号"
        width="160"
      ></el-table-column>
      <el-table-column
        prop="score"
        label="积分数"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="changeTime"
        label="积分变动时间"
        width="160"
      ></el-table-column>
    </el-table>

    <!-- 分页控件 -->
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next"
    ></el-pagination>

    <!-- 弹窗提示 -->
    <!-- <el-dialog
      v-model:visible.sync="importDialogVisible"
      title="导入结果"
      width="400px"
    >
      <p>{{ importMessage }}</p>
      <el-button type="primary" @click="importDialogVisible = false">确定</el-button>
    </el-dialog> -->
  </div>
</template>

<script setup>
// import { ref, computed, watch } from 'vue';
// import * as XLSX from 'xlsx';
// import Papa from 'papaparse';

// // 模拟数据
// const mockData = Array.from({ length: 50 }, (_, i) => ({
//   memberId: `MEM${i + 1}`,
//   phone: `138${String(Math.floor(Math.random() * 1000000)).padStart(6, '0')}`,
//   score: Math.floor(Math.random() * 1000) + 100,
//   changeTime: new Date().toLocaleString()
// }));

// // 核心状态
// const state = {
//   currentPage: 1,
//   pageSize: 10,
//   sortBy: '',
//   sortOrder: 'asc',
//   searchPhone: '',
//   importDialogVisible: false,
//   importMessage: '',
//   loading: false
// };

// // 计算属性 - 过滤后的数据
// const filteredData = computed(() => {
//   let data = [...mockData];
  
//   // 搜索过滤
//   if (state.searchPhone) {
//     data = data.filter(item => item.phone.includes(state.searchPhone));
//   }

//   // 排序处理
//   if (state.sortBy && state.sortOrder) {
//     data.sort((a, b) => {
//       const modifier = state.sortOrder === 'asc' ? 1 : -1;
//       return modifier * compare(a[state.sortBy], b[state.sortBy]);
//     });
//   }

//   // 分页处理
//   const startIndex = (state.currentPage - 1) * state.pageSize;
//   const endIndex = startIndex + state.pageSize;
//   return data.slice(startIndex, endIndex);
// });

// // 工具函数 - 字段比较
// function compare(a, b) {
//   if (typeof a === 'string' && typeof b === 'string') {
//     return a.localeCompare(b);
//   }
//   return a - b;
// }

// // 导入功能
// const handleImport = async () => {
//   state.loading = true;
//   const file = await document.querySelector('#fileInput').files[0];
  
//   try {
//     const content = await file.arrayBuffer();
//     const workbook = XLSX.read(content, { type: 'array' });
//     const csvData = Papa.parse(file, { header: true });

//     // 这里可以添加数据校验逻辑
//     const newData = csvData.data.map(row => ({
//       memberId: row['会员ID'],
//       phone: row['手机号'],
//       score: parseInt(row['积分数']),
//       changeTime: new Date(row['积分变动时间'])
//     }));

//     mockData.push(...newData);
//     state.importMessage = `成功导入 ${newData.length} 条记录！`;
//   } catch (error) {
//     state.importMessage = '文件格式错误，请确保是Excel/CSV格式';
//   } finally {
//     state.loading = false;
//     state.importDialogVisible = true;
//   }
// };

// // 列表操作
// const handleRowClick = (row) => {
//   console.log('查看详细记录:', row);
//   // 这里可以跳转到详细页面
// };

// const handlePageChange = (page) => {
//   state.currentPage = page;
// };

// // 搜索功能
// watch(state.searchPhone, () => {
//   state.currentPage = 1; // 搜索时重置分页
// });
</script>

<style scoped>
.container {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.action-bar {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.search-box {
  display: flex;
  align-items: center;
}

.el-table {
  border-collapse: collapse;
  width: 100%;
}

.el-pagination {
  margin-top: 20px;
  text-align: center;
}

.el-dialog {
  text-align: center;
}
</style>